<template>
    <div class="list-page">
        <div class="list-page-header list-page-header-flex">
            <div class="flex-left">
                <el-button type="primary" @click="add">新增</el-button>
                <el-button type="primary" @click="edit">编辑</el-button>
                <el-popconfirm title="确认删除？" confirmButtonText="确定" cancelButtonText="取消" @confirm="del">
                    <template #reference>
                        <el-button>删除</el-button>
                    </template>
                </el-popconfirm>
            </div>
            <div class="flex-right">
                <el-input v-model="query.projectName" class="search-input-class" placeholder="所属项目" />
                <el-input v-model="query.departmentName" class="search-input-class" placeholder="所属部门" />
                <el-input v-model="query.code" class="search-input-class" placeholder="设备编号" />
                <el-input v-model="query.name" class="search-input-class" placeholder="设备名称" />
                <el-button type="primary" @click="loadData">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>
        <div class="list-content">
            <el-table
                ref="datagrid"
                :data="table.data"
                border
                style="width: 100%; height: 100%"
                @row-click="handleClickTableRow"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="code" label="设备编号" width="120" show-overflow-tooltip />
                <el-table-column prop="name" label="设备名称" width="120" show-overflow-tooltip />
                <el-table-column prop="model" label="型号" width="120" show-overflow-tooltip />
                <el-table-column prop="specs" label="规格" width="120" show-overflow-tooltip />
                <el-table-column prop="projectName" label="所属项目" show-overflow-tooltip />
                <el-table-column prop="departmentName" label="所属部门" width="180" show-overflow-tooltip />
                <el-table-column prop="state" label="状态" :formatter="stateFormatter" width="120" />
                <el-table-column fixed="right" label="操作" width="100">
                    <template #default="scope">
                        <el-button @click="showHistory(scope.row)" size="small">历史记录</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="list-footer">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="table.pagination.currentPage"
                :page-sizes="table.pagination.pageSizes"
                :page-size="table.pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="table.pagination.total"
            ></el-pagination>
        </div>
        <transition name="slide-fade">
            <div v-if="showInfoWindow" class="list-form-modal">
                <device-form :id="selectedId" @close="closeInfoWindow"></device-form>
            </div>
        </transition>

        <el-dialog
            width="800px"
            top="10vh"
            title="设备历史"
            v-model="showDeviceHistory"
            :lock-scroll="true"
            :close-on-click-modal="false"
            :destroy-on-close="true"
        >
            <div class="dialog-content">
                <device-history :deviceId="selectedId"></device-history>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import DeviceForm from './form/DeviceForm.vue'
import DeviceHistory from './components/DeviceHistory.vue'
import http from '@/http.js'

const datagrid = ref(null)

const query = reactive({
    projectName: '',
    departmentName: '',
    code: '',
    name: ''
})

const table = reactive({
    data: [],
    selected: [],
    pagination: {
        currentPage: 1,
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        total: 0
    }
})

const selectedId = ref('')

const showInfoWindow = ref(false)

const showDeviceHistory = ref(false)

const handleSelectionChange = (val) => {
    table.selected = val
}

const handleSizeChange = (val) => {
    table.pagination.pageSize = val
    loadData()
}

const handleCurrentChange = (val) => {
    table.pagination.currentPage = val
    loadData()
}

const handleClickTableRow = (row) => {
    datagrid.value.clearSelection()
    datagrid.value.toggleRowSelection(row)
}

const stateFormatter = (row, column, cellValue, index) => {
    let data = row[column.property]
    if (data == 0) {
        return '使用中'
    } else if (data == 1) {
        return '维修中'
    } else {
        return '已报废'
    }
}

const loadData = () => {
    let params = {
        projectName: query.projectName,
        departmentName: query.departmentName,
        code: query.code,
        name: query.name,
        page: table.pagination.currentPage,
        pageSize: table.pagination.pageSize
    }
    http.fetchForm({
        url: '/yunying/device/queryGrid',
        data: params
    }).then((res) => {
        table.data = res.data.grid
        table.pagination.total = res.data.total
    })
}

const reset = () => {
    query.projectName = ''
    query.departmentName = ''
    query.code = ''
    query.name = ''
    loadData()
}

const add = () => {
    selectedId.value = ''
    showInfoWindow.value = true
}

const edit = () => {
    selectedId.value = ''
    let selected = table.selected
    if (selected.length == 0) {
        ElNotification({
            title: '提示',
            message: '请选择要编辑的工程',
            type: 'info'
        })
        return
    }
    selectedId.value = selected[0].id
    showInfoWindow.value = true
}

const del = () => {
    let selected = table.selected
    if (selected.length == 0) {
        ElNotification({
            title: '提示',
            message: '请选择要删除的工程',
            type: 'info'
        })
        return
    }
    http.fetchForm({
        url: '/yunying/device/deleteById',
        method: 'post',
        data: {
            id: selected[0].id
        }
    }).then((res) => {
        ElNotification({
            title: '提示',
            message: '删除成功',
            type: 'success'
        })
        loadData()
    })
}

const closeInfoWindow = () => {
    showInfoWindow.value = false
    loadData()
}

const handleStart = (row) => {
    let url = 'http://' + row.ipAddress + ':' + row.ipPort + '/DB/startMeasure'
    http.fetchForm({
        url: url,
        method: 'get',
        data: {
            id: row.id
        }
    }).then((res) => {
        ElNotification({
            title: '提示',
            message: '开启成功',
            type: 'success'
        })
    })
}

const showHistory = (row) => {
    selectedId.value = row.id
    showDeviceHistory.value = true
}

// mounted
onMounted(() => {
    loadData()
})
</script>
<style scoped>
@import '@/assets/css/list-page.css';
</style>
